<template>
  <div class="interview3-wrap">
    <header>
      <div class="header-search">
        <!-- 这里是一个多选框和搜索框 -->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in choiceData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 这里是一个搜索框 -->
        <el-input placeholder="输入职位、职位搜索" prefix-icon="el-icon-search" clearable>
        </el-input>
      </div>
      <ul class="header-item" v-if="questionData !== null">
        <li v-for="(questionData, index) in questionsData" :key="index" @click="getInterviewAI(questionData)">
          <img :src="questionData.imgUrl" alt="" />
          <div>
            <span class="workName">{{ questionData.workName }}</span>
            <span>{{ questionData.questionCount }}道题</span>
          </div>
        </li>
      </ul>
    </header>
  </div>
</template>

<script setup lang="ts">
// 进行路由跳转
import { useRouter } from 'vue-router'
import {getQuestionsData} from '@/api/mock'
import { useUserStore } from '@/store/modules/user'
import { toRefs} from 'vue'
const userStore = useUserStore()
const { virtualInterviewTimes } = toRefs(userStore)
const router = useRouter()
const questionsData = ref(null)


getQuestionsData().then((res) => {
  console.log("res",res);
  questionsData.value = res
})
  
  
const choiceData = ref([
  {
    value: '1',
    label: '全部岗位'
  },
  {
    value: '2',
    label: '软件开发'
  },
  {
    value: '3',
    label: '通信/硬件'
  },
  {
    value: '4',
    label: '机械/制造'
  },
  {
    value: '5',
    label: '产品/项目/运营'
  },
  {
    value: '6',
    label: '金融'
  },
  {
    value: '7',
    label: '市场营销'
  },
  {
    value: '8',
    label: '咨询/管理'
  },
  {
    value: '9',
    label: '人事/行政/财务'
  },
  {
    value: '10',
    label: '教育/科研'
  },
  {
    value: '11',
    label: '供应链/物流'
  },
  {
    value: '12',
    label: '视觉/交互/设计'
  },
  {
    value: '13',
    label: '房地产/建筑'
  },
  {
    value: '14',
    label: '生物医疗'
  },
  {
    value: '15',
    label: '医护健康'
  },
  {
    value: '16',
    label: '旅游/服务业'
  },
  {
    value: '17',
    label: '其他'
  }
])

function getInterviewAI(data){
  if(virtualInterviewTimes.value <= 0){
    // 消息提示
    ElMessage({
      message: '免费虚拟面试次数已用完',
      type: 'warning'
    })
    return
  }
  setTimeout(() => {
    virtualInterviewTimes.value--;
  }, 1000)
  router.push({
    path: '/interviewAI',
    state: {
      questionData: JSON.stringify(data)
    }
  })
}

</script>

<style scoped>


header {
  padding: 20px;
  box-shadow: var(--boxShadow);
  border-radius: 12px;
  margin-bottom: 20px;
}

header .header-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

header .header-search .el-select {
  width: 300px;
}

header .header-search .el-input {
  width: 200px;
}

header .header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header-item li {
  display: flex;
  align-items: center;
  width: 180px;
  border: 1px solid #e3e1e1;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.header-item li:hover {
  background-color: #f0f7f7;
  border: 1px solid #fff;
  box-shadow: var(--boxShadow);
  transform: translateX(3px);
  transition: all 0.3s;
}

.header-item li img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.header-item li div {
  display: flex;
  flex-direction: column;
}

.header-item li div span:nth-of-type(1) {
  font-size: 14px;
  font-weight: 550;
}

.header-item li div span:nth-of-type(2) {
  font-size: 12px;
  color: #999;
}
.workName {
  font-size: 16px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}
</style>
